HTML Styles

    Every browser has a specific engine that parses the HTML document and displays a default style of the page content.

    HTML Style Attribute

    style is an attribute that can be used along with many HTML tags. With the help of style, we can change the default style of the element by changing its font size, color, font, etc. It is also known as Inline CSS, where we can change the individual element style.

    Style syntax 

    <tagname style="property:value;">

    property and value are part of CSS.

    Change the background Color

    Using the CSS background-color property, we can change the background color of <body> and all the HTML elements that are under the body tag.

    Example 

    <body style="background-color:yellow;">

<h1>TechGeekBuzz</h1>
<p>Welcome to TechGeekBuzz.</p>

</body>

    This will change the background color of the page from white to yellow.

    Change the Text color

    By default, black is the color of every text element, but it can be changed using the style attribute and color property.

    Example 

    <h1 style="color:red;">This heading is Red</h1>
<p style="color:blue;">The colour of this paragraph is Blue.</p>

    Change Text Font

    The font of the text can be altered using font-family property. 

    <h1 style="font-family:calibri;">TechGeekBuzz</h1>
<p style="font-family:batang;">HTML 5 Tutorial </p>

    Change Text Size

    The size of the text can also be changed using the style attribute and font-size property. 

    <h1 style="font-size:400%;">TechGeekBuzz</h1>
<p style="font-size:200%;">HTML 5 Tutorial </p>

    Align Text

    The alignment of the text can also be altered using CSS text-align property, we can put text in the center, left, or right. 

    <h1 style="text-align:center;">TechGeeKBuzz</h1>
<p style="text-align:left;">Welcome to TechGeekBuzz.</p>

    Multiple Style properties

    Within a single element, we can define multiple style properties. For instance, if we want to change the font size and color of a paragraph tag, then we can pass multiple CSS properties in that paragraph tag.

    Example 

    <h1 style="color: red;">TechGeeKBuzz</h1>
<p style=" color:blue; font-family:algerian;"> Welcome to TechGeekBuzz.</p>

    Summary

    • style is an attribute that can work along with many HTML body elements.
    • With style, we can change the style, font, color, background, etc., of a page.
    • The HTML style attribute is also known as inline CSS.
    • Styling an element will be limited to that element; it won’t affect similar other elements present in the document.
    • style properties and values are part of CSS.
    Previous Tutorial Next Tutorial